/* 列表组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 列表变量 */
:root {
  --list-item-height: calc(56 * var(--unit));
  --list-item-height-large: calc(72 * var(--unit));
  --list-item-height-small: calc(48 * var(--unit));
  --list-item-padding-x: calc(16 * var(--unit));
  --list-item-padding-y: calc(12 * var(--unit));
  --list-item-gap: 1px;
  --list-divider-color: var(--color-comp-divider);
  --list-transition-duration: 0.3s;
  --list-icon-size: calc(24 * var(--unit));
  --list-avatar-size: calc(40 * var(--unit));
}

/* 基础列表样式 */
.list {
  background-color: var(--color-comp-background-primary);
  border-radius: calc(8 * var(--unit));
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;

  /* 分割线列表 */
  &.divided {
    border: 1px solid var(--list-divider-color);
    border-radius: calc(8 * var(--unit));

    .list-item {
      border-bottom: 1px solid var(--list-divider-color);

      &:last-child {
        border-bottom: none;
      }
    }
  }

  /* 无边框列表 */
  &.bordered {
    border: 1px solid var(--list-divider-color);
    border-radius: calc(8 * var(--unit));
  }

  /* 圆角列表 */
  &.rounded {
    border-radius: calc(12 * var(--unit));
  }
}

/* 列表项 */
.list-item {
  display: flex;
  align-items: center;
  min-height: var(--list-item-height);
  padding: var(--list-item-padding-y) var(--list-item-padding-x);
  background-color: var(--color-comp-background-primary);
  color: var(--color-font-primary);
  cursor: pointer;
  transition: all var(--list-transition-duration) ease;
  position: relative;

  /* 悬停状态 */
  &:hover:not(.disabled):not(.no-hover) {
    background-color: var(--color-interactive-hover);
  }

  /* 激活状态 */
  &:active:not(.disabled) {
    background-color: var(--color-interactive-pressed);
  }

  /* 选中状态 */
  &.selected,
  &.active {
    background-color: var(--color-brand10);
    color: var(--color-brand);

    .list-item-title {
      color: var(--color-brand);
      font-weight: var(--font-weight-medium);
    }
  }

  /* 禁用状态 */
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* 无交互状态 */
  &.no-hover {
    cursor: default;
  }
}

/* 列表项内容 */
.list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: calc(4 * var(--unit));
}

/* 列表项标题 */
.list-item-title {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  color: var(--color-font-primary);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列表项描述 */
.list-item-description {
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-regular);
  color: var(--color-font-secondary);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列表项图标 */
.list-item-icon {
  width: var(--list-icon-size);
  height: var(--list-icon-size);
  margin-right: var(--list-item-padding-x);
  fill: var(--color-icon-primary);
  flex-shrink: 0;
}

/* 列表项头像 */
.list-item-avatar {
  width: var(--list-avatar-size);
  height: var(--list-avatar-size);
  border-radius: 50%;
  margin-right: var(--list-item-padding-x);
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--color-comp-background-secondary);
}

/* 列表项操作区 */
.list-item-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--unit));
  color: var(--color-icon-secondary);
  flex-shrink: 0;

  .list-item-icon {
    width: calc(20 * var(--unit));
    height: calc(20 * var(--unit));
    margin-right: 0;
  }
}

/* 列表项尺寸变体 */
.list-item-large,
.list-item.large {
  min-height: var(--list-item-height-large);
  padding: calc(var(--list-item-padding-y) * 1.5) var(--list-item-padding-x);

  .list-item-title {
    font-size: var(--font-size-body-large);
  }

  .list-item-description {
    font-size: var(--font-size-caption-large);
  }

  .list-item-icon {
    width: calc(28 * var(--unit));
    height: calc(28 * var(--unit));
  }

  .list-item-avatar {
    width: calc(48 * var(--unit));
    height: calc(48 * var(--unit));
  }
}

.list-item-small,
.list-item.small {
  min-height: var(--list-item-height-small);
  padding: calc(var(--list-item-padding-y) * 0.75) var(--list-item-padding-x);

  .list-item-title {
    font-size: var(--font-size-body-small);
  }

  .list-item-description {
    font-size: var(--font-size-caption-small);
  }

  .list-item-icon {
    width: calc(20 * var(--unit));
    height: calc(20 * var(--unit));
  }

  .list-item-avatar {
    width: calc(32 * var(--unit));
    height: calc(32 * var(--unit));
  }
}

/* 列表组标题 */
.list-group-title {
  padding: calc(12 * var(--unit)) var(--list-item-padding-x);
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-font-tertiary);
  background-color: var(--color-background-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .list {
    background-color: var(--color-background-secondary);
  }

  .list-item {
    background-color: var(--color-background-secondary);

    &.selected,
    &.active {
      background-color: rgba(49, 122, 247, 0.1);
      color: var(--color-brand);
    }
  }

  .list-group-title {
    background-color: var(--color-background-tertiary);
  }
}

